<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 1.安装vue-router模块 -->
		<script src="../lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/* 修改高亮的第一种方式 */
			.router-link-active,.myactive{
				color: red;
				font-weight: 800;
				font-style: italic;
				font-size: 80px;
				
				text-decoration: underline;
				background-color: green;
				
			}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(140px);
			}
			.v-enter-active,
			.v-leave-active{
				transition: all 0.5s ease;
			} 
		</style>
	</head>
	<body>
		<div id="app">
			<!-- vue-router提供的元素，专门用来当做占位符，路由规则匹配到的组件会展示到里面 -->
			<!-- 跳转时前面要加#号 -->
			<!-- <a href="#/login">登录</a>
			<a href="#/register">注册</a> -->
			<!-- routet-link默认渲染为一个a标签 -->
			
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/register">注册</router-link>
			<transition mode="out-in" >
				<router-view></router-view>
			</transition>
			
		</div>
		<script type="text/javascript">
			//组件的模板对象
			var login = {
				template:'<h1>登录组件</h1>'
			}
			var register = {
				template:'<h1>注册组件</h1>'
			}
			//2.创建一个路由对象，导入包之后，window全局对象中就有一个VueRouter构造函数
			//在new路有对象的时候，可以为构造函数传递一个配置对象
			var routerObj = new VueRouter({
				routes:[//route表示路由对象匹配规则
				//每个路由规则都是一个对象，有两个属性：1、path表示监听那个路由链接地址
				//2、component 表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
				//注意：这里必须放组件模板对象，不能是组件引用名称
					/* {path:'/',component:login}, */
					{path:'/',redirect:login},//这里的redirect和Node中的redirect完全是两码事
					{path:'/login',component:login},
					{path:'/register',component:register}
				] ,
				/* 修改高亮的第二种方式 */
				linkActiveClass:'myactive'
			})
			
			var vm =new Vue({
				el:'#app',
				data:{},
				methods:{
					
				},
				router:routerObj //将路由给则对象注册到vm实例上，用来监听URL地址变化，然后展示对应的组件
			})
		</script>
	</body>
</html>
